<template>
  <div class="print-list">
    <a-row :gutter="16">
      <a-col :span="8" v-if="page == 1">
        <a-card :bordered="false" id="first-card">
          <div
            style="
              width: 100%;
              height: 119px;
              border: 1ps dotted rgba(0, 0, 0, 0.1);
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
            "
            @click="addPrint"
          >
            <span style="font-size: 24px; padding-bottom: 3px">+</span>
            <span style="font-size: 16px; margin-left: 5px">新增模板</span>
          </div>
        </a-card>
      </a-col>
      <a-col :span="8" v-for="item in list" :key="item.id">
        <a-card :bordered="false">
          <a-card-meta
            :title="item.name"
            :description="'应用楼宇: ' + item.build_names"
          >
            <template #avatar>
              <SnippetsOutlined style="font-size: 32px; color: #2681f3" />
            </template>
          </a-card-meta>
          <template class="ant-card-actions" #actions>
            <div
              v-if="item.online_preview.previewUrl"
              @click="previewClick(item)"
            >
              <EyeOutlined style="font-size: 16px" />
              <span>在线预览</span>
            </div>
            <div>
              <a :href="item.template_path">
                <DownloadOutlined style="font-size: 16px" />
                <span>下载</span>
              </a>
            </div>
            <div @click="addPrint(item.id)">
              <SettingOutlined style="font-size: 16px" />
              <span>编辑</span>
            </div>
            <a-popconfirm
              title="确认删除模板吗?"
              ok-text="是"
              cancel-text="否"
              @confirm="deletePrint(item.id)"
            >
              <div>
                <DeleteOutlined style="font-size: 16px" />
                <span>删除</span>
              </div>
            </a-popconfirm>
            <!-- <setting-outlined key="setting" />
            <edit-outlined key="edit" />
            <ellipsis-outlined key="ellipsis" /> -->
          </template>
        </a-card>
      </a-col>
    </a-row>

    <!-- 预览 -->
    <ElectronContractModal
      :visible="electronContractVisible"
      :urlData="previewUrlData"
      :esignDetail="{
        esignCheck: true,
      }"
      title="在线预览"
      @close="electronContractVisible = false"
    />
  </div>
</template>

<script>
import { defineComponent, reactive, ref, watch } from "vue";
import {
  SnippetsOutlined,
  DownloadOutlined,
  SettingOutlined,
  DeleteOutlined,
  EyeOutlined,
} from "@ant-design/icons-vue";
import ElectronContractModal from "../../../components/ElectronContractModal/index.vue";

export default defineComponent({
  name: "PrintList",
  components: {
    SnippetsOutlined,
    DownloadOutlined,
    SettingOutlined,
    DeleteOutlined,
    EyeOutlined,
    ElectronContractModal,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    page: {
      type: [String, Number],
      default: 1,
    },
  },
  setup(props, context) {
    const addPrint = (id) => {
      if (id > 0) {
        context.emit("addPrint", id);
      } else {
        context.emit("addPrint");
      }
    };

    const deletePrint = (id) => {
      context.emit("deletePrint", id);
    };

    const electronContractVisible = ref(false);
    const previewUrlData = ref({});

    const previewClick = (item) => {
      if (item.online_preview.previewUrl) {
        previewUrlData.value = {
          previewUrl: item.online_preview.previewUrl,
          url: item.template_path,
        };
        electronContractVisible.value = true;
      }
    };

    return {
      addPrint,
      deletePrint,
      previewClick,
      electronContractVisible,
      previewUrlData,
    };
  },
});
</script>

<style lang="less" scoped>
.print-list {
  min-height: 567px;
  :deep(.ant-card) {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  #first-card {
    border: 1px dashed rgba(0, 0, 0, 0.2);
    box-shadow: none;
  }

  :deep(.ant-card-body) {
    min-height: 120px;
  }
  :deep(.anticon-snippets) {
    margin-top: 10px;
  }
  :deep(.ant-card-meta-description) {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .ant-card-actions {
    span {
      font-size: 13px;
      margin-left: 10px;
    }
  }
}
</style>
